<template>
  <div class="app-container">
    <el-form ref="pageInfo" :inline="true" class="demo-form-inline" :model="pageInfo" align="left">
      <el-form-item label="业主姓名">
        <el-input v-model="pageInfo.ownerName" placeholder="业主姓名" />
      </el-form-item>
      <el-form-item label="小区名称">
        <el-input v-model="pageInfo.premiseName" placeholder="小区名称" />
      </el-form-item>
      <el-form-item label="房源类型">
        <el-select v-model="pageInfo.houseType" placeholder="房源类型">
          <el-option label="国有房产" value="1" />
          <el-option label="直管房产" value="2" />
          <el-option label="自管房产" value="3" />
          <el-option label="军队房产" value="4" />
          <el-option label="集体所有房产" value="5" />
          <el-option label="私有房产" value="6" />
          <el-option label="港澳台投资房产" value="7" />
          <el-option label="涉外房产" value="8" />
          <el-option label="其他房产" value="9" />
        </el-select>
      </el-form-item>
      <el-form-item label="起租日期">
        <el-col :span="11">
          <el-date-picker v-model="pageInfo.leaseStartTime" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker v-model="pageInfo.leaseEndTime" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <div align="right">
        <el-form-item>
          <el-button type="warning" @click="onSubmit">查询</el-button>
          <el-button type="warning" @click="resetForm('pageInfo')">清空</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="ownerName"
        label="业主姓名"
      />
      <el-table-column
        prop="sfContractNo"
        label="收房合同编号"
      />
      <el-table-column
        prop="ownerMobile"
        label="电话"
      />
      <el-table-column
        prop="premiseName"
        label="小区"
      />
      <el-table-column
        prop="leaseStartTime"
        label="起租日期"
        :formatter="changeDate"
      />
      <el-table-column
        prop="leaseEndTime"
        label="结束日期"
        :formatter="changeDate"
      />
      <el-table-column
        prop=""
        label="押付方式"
      >
        <template scope="scope">
          押{{ scope.row.depositType }}
          付{{ scope.row.paymentType }}
        </template>
      </el-table-column>
      <el-table-column
        prop="depositMoney"
        label="押金"
      />
      <el-table-column
        prop="monthRent"
        label="租金"
      />
      <el-table-column
        prop="status"
        label="状态"
      >
        <template scope="scope">
          <span v-if="scope.row.status==1">
            <el-button type="text" style="color: blue">草稿</el-button>
          </span>
          <span v-if="scope.row.status==2">
            <el-button type="text" style="color: red">已提交</el-button>
          </span>
          <span v-if="scope.row.status==3">
            <el-button type="text" style="color: red">已解约</el-button>
          </span>
          <span v-if="scope.row.status==4">
            <el-button type="text" style="color: red">已结束</el-button>
          </span>
          <span v-if="scope.row.status==9">
            <el-button type="text" style="color: red">作废</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pageInfo.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        ownerName: '',
        premiseName: '',
        houseType: '',
        leaseStartTime: '',
        leaseEndTime: ''
      }
    }
  },
  created() {
    this.ownersList()
  },
  methods: {
    changeDate(row, column) {
      const date = row[column.property]
      if (date == null) {
        return ''
      }
      return this.moment(date).format('YYYY/MM/DD')
    },
    resetForm(formName) {
      this.pageInfo = {}
    },
    onSubmit() {
      this.ownersList()
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.ownersList()
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val
      this.ownersList()
    },
    ownersList() {
      this.axios.get('http://localhost:8092/tSfContract/ownersList', { params: this.pageInfo }).then(res => {
        console.log(res.data)
        this.tableData = res.data.obj.list
        this.total = res.data.obj.total
        this.pageInfo.pageNum = res.data.obj.pageNum
        this.pageInfo.pageSize = res.data.obj.pageSize
      })
    }
  }
}
</script>

